<template>
  <div class="textWrap" :class="[isMy ? 'self' : 'chatgpt']" ref="textRef">
    <div v-if="!isMy" v-html="text"></div>
    <div v-else  v-text="text" />
  </div>
</template>
<script setup>
const props = defineProps(['text', 'isMy']);

</script>
<style scoped lang="less">
.self{
  background: linear-gradient( 117deg, rgba(171, 167, 254, 0.3) 0%, rgba(66, 204, 225, 0.3) 100%);
  border-radius: 16px 0 16px 0;
  font-size: 18px;
  color: #213F99;
  padding: 17px 20px;
  overflow-wrap: break-word;
  min-width: 20px;

}

.chatgpt {
  background: #F5F8FF;
  border-radius: 3px 20px 3px 20px;
  font-weight: normal;
  font-size: 18px;
  color: #3A5060;
  padding: 17px 20px;
  overflow-wrap: break-word;
}
</style>